<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>Artical - Shikkaku</title>
	<link rel="shortcut icon" href="../icon.ico"/>
	<link href="http://apps.bdimg.com/libs/fontawesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"><!-- 引入font awesomeCSS文件 -->
	<link rel="stylesheet" type="text/css" href="../css/artical.css"><!-- 引入CSS文件 -->
</head>
<body>

	<div class="art-click">
		<a href="../home.html"><img class="logo" src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/Lk52YmNVzLWXGgPrzMnlhPFYyw0Nw8ZxpVjtXY6InBY!/r/dGwBAAAAAAAA"/></a>
		<div class="top">TOP</div>
		<div class="menu">
			<span class="fa fa-list"></span><br/>
			M<br/>E<br/>N<br/>U
			<div class="menu-info">
				<div class="menu-info-img clearfix">
					<div class="left">前端文章</div>
					<div class="right">脑洞文章</div>
				</div>
				<div class="menu-info-text">
					<div class="group1">
						<a href="artical1.html">关于简历页面的搭建</a><br/>
						<a href="artical2.html">tips笔记</a>
					</div>
					<div class="group2">
						<a href="artical3.html">冬至</a><br/>
						<a href="artical4.html">龋齿</a>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="art-back">
		<div class="container">
			<div class="back">
				<img src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/nDwzzKL18rC5RJx0jF23ypGjgWwsnWnY3TDN3Uo23PM!/r/dDwBAAAAAAAA"/>
			</div>
			<div class="side">
				<div class="side-img side-img2"></div>
				<div class="side-text">
					学习过程中<br/>
					一小部分简短的笔记<br/>
					在哪个坑里跌倒<br/>
					就在哪个坑里躺下
				</div>
			</div>
		</div>
	</div>

	<div class="art-title">
		<div class="container">
			<h4><span>[前端]</span>2033.02.31 UPDATE</h4>
			<h2>TIPS笔记</h2>
			<p>排版示例</p>
		</div>
	</div>

	<div class="art-info">
		<div class="container">
				<div>
					<h4><span class="fa fa-navicon"></span>W3C标准</h4>
					<p>倡导结构、样式、行为分离</p>
					<ul>
						<li>结构化标准语言（HTML/XML）</li>
						<li>表现标准语言（CSS）</li>
						<li>行为标准语言（DOM/ECMAScript)</li>
					</ul><br/><br/>

					<h4><span class="fa fa-navicon"></span>元素分类</h4>
					<p>CSS布局中，HTML的标签元素大致被分为三种不同的类型：块状元素、内联元素、内联块状元素</p>
					<ul>
						<li>
							块状元素：<br/>
							<tt><pre>&lt;div&gt;、&lt;p&gt;、&lt;h&gt;、&lt;ol&gt;、&lt;ul&gt;、&lt;dl&gt;、&lt;table&gt;、&lt;form&gt;</pre></tt>
						</li>
						<li>
							内联元素：<br/>
							<tt><pre>&lt;a&gt;、&lt;span&gt;、&lt;i&gt;、&lt;em&gt;、&lt;strong&gt;、&lt;code&gt;</pre></tt>
						</li>
						<li>
							内联块状元素：<br/>
							<tt><pre>&lt;img&gt;、&lt;input&gt;</pre></tt>
						</li>
					</ul><br/><br/>

					<h4><span class="fa fa-navicon"></span>盒模型的纵向剖析</h4>
					<p>从上到下依次是：border、content+padding、background-image、background-color、margin</p><br/>

					<h4><span class="fa fa-laptop"></span>TIPS</h4>
					<p class="small-margin">新窗口打开</p><br/>
					<tt><pre>&lt;a href="目标网址" target="_blank"&gt;click here!&lt;/a&gt;</pre></tt><br/><br/>
					<p class="small-margin">通过class选择元素</p><br/>
					<tt><pre>h1[class] {color:red;}</pre></tt><br/><br/>
					<p class="small-margin">用absolute实现居中</p><br/>
					<tt><pre>定位50%
负margin值为元素大小的一半</pre></tt><br/>
					<br/>
					<p class="small-margin">用after伪类实现清除浮动：</p><br/>
					<tt><pre>.clearfloat:after{
	display: block;
	clear: both;
	content: "";
	visibility: hidden;
	height: 0;
}

.clearfloat:after{
	content: "";
	display: table;
	clear: both;
}</pre></tt><br/><br/>
					<p class="small-margin">改变盒子模型，使得为元素设定的宽度和高度决定了元素的边框盒，保证改变padding值时盒子不会被撑大</p><br/>
					<tt><pre>box-sizing: border-box;</pre></tt><br/><br/><br/>

					<h4><span class="fa fa-navicon"></span>自调用匿名函数</h4>
					<p class="small-margin">通过创建一个自调用匿名函数，创建一个特殊的函数作用域，该作用域中的代码不会和已有的同名函数、方法和变量以及第三方库冲突</p><br/>
					<tt><pre>(function(){
==code==
})();


(function(){
==code==
}());


!function(){
==code==
}();

</pre></tt><br/><br/>

				</div>
		</div>
	</div>

	<footer id="contact-me" class="contact-me">
		<div class="container">
			<h3>CONTACT ME</h3>
			<div class="footer-icon">
				<span class="fa fa-mobile"></span>
				<span class="fa fa-weibo"></span>
				<span class="fa fa-qq"></span>
				<span class="fa fa-weixin"></span>
			</div>
			<p>-  2017.06  -  All By Shikkaku</p>
			<div class="scan">
				<img class="scan1" src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/oLckW28EvtxNSBPw8COtYpXYFeVsMwfH8uPuNBQsz9Q!/r/dD0BAAAAAAAA"></img>
				<img class="scan2" src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/PTDPpGThKJ1NFuL7ZAPcXhaFBriu.7ZYCfDUeMA6ibA!/r/dD0BAAAAAAAA"></img>
				<img class="scan3" src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/GPukg8SBmW31DaElpMoo88rWDPFRf0MUS6urSY4y6HE!/r/dD0BAAAAAAAA"></img>
				<img class="scan4" src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/WmKZRDQCnhXS.hpVrq4j*VyHnFWCJ3kPf4mcFVxTjsw!/r/dDwBAAAAAAAA"></img>
			</div>
		</div>
	</footer>
	
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><!-- 引入jQuery -->
	<script type="text/javascript" src="../js/artical.js"></script><!-- 引入JS脚本文件 -->
</body>
</html>